{% load i18n sizeformat %}
<div class="quota-dynamic" style="border-bottom:1px solid #eeeeee">
  <h3 class="quota-heading">{% trans "Usage Summary" %}</h3>
</div>
<div class="usage_info_wrapper">
  <!-- <form action="?" method="get" id="date_form" class="form-inline">
    <h3>{% trans "Select a period of time to query its usage:" %}</h3>
    <div class="datepicker form-group">
      {% blocktrans with start=form.start %}
      <label>From:</label> {{ start }}{% endblocktrans %}
    </div>
    <div class="datepicker form-group">
      {% blocktrans with end=form.end %}
      <label>To:</label>{{ end }}{% endblocktrans %}
    </div>
    <button class="btn btn-primary" type="submit">{% trans "Submit" %}</button>
    <small>{% trans "The date should be in YYYY-mm-dd format." %}</small>
  </form> -->
  <p id="activity" class="usageSummary ">
    <span class="col-sm-4">
   	 	<strong>{% trans "Active Instances:" %}</strong> 
    	<i>{{ usage.summary.instances|default:'0' }}</i>
    </span>
    <span class="col-sm-4">
    	<strong>{% trans "Active RAM:" %} </strong> 
    	<i>{{ usage.summary.memory_mb|mb_float_format|default:'0' }}</i>
    </span>
    <span class="col-sm-4">
    	 <strong>{% trans "Vcpu Hours" %}</strong>  
    	<!-- <strong>虚拟内核运行小时数</strong> -->
    	<i>{{ usage.summary.vcpu_hours|floatformat:"0"|filesizeformat|cut:"B"|cut:"字节"|cut:"bytes" }}</i>
    </span>
    <span class="col-sm-4">
    	<strong>{% trans "Disk Hours" %}</strong>
    	<!-- <strong>磁盘GB运行小时数</strong> -->
    	<i>{{ usage.summary.disk_gb_hours|floatformat:"0"|filesizeformat|cut:"B"|cut:"字节"|cut:"bytes" }}</i>
    </span>
    <span class="col-sm-4">
    	 <strong>{% trans "RAM Hours" %}</strong>
    	<!-- <strong>内存MB运行小时数</strong> -->
    	<i>{{ usage.summary.memory_mb_hours|floatformat:"0"|filesizeformat|cut:"B"|cut:"字节"|cut:"bytes" }}</i>
    </span>
  </p>
</div>
